<template>
  <div class="container">
    <h1>🎬 视频播放平台</h1>

    <!-- 搜索 & 分类 -->
    <div class="filters">
      <input v-model="search" placeholder="🔍 搜索标题..." @keyup.enter="fetchVideos" />
      <select v-model="selectedClassify" @change="fetchVideos">
        <option value="">全部分类</option>
        <option v-for="c in classifyList" :key="c" :value="c">{{ c }}</option>
      </select>
      <button @click="fetchVideos">搜索</button>
    </div>

    <!-- 视频列表 -->
    <div class="video-list">
      <div
        v-for="v in videos"
        :key="v.id"
        class="video-item"
        @click="playVideo(v)"
      >
        <img :src="v.jpg_path" alt="thumb" v-if="v.jpg_path" />
        <div class="info">
          <h3>{{ v.title }}</h3>
          <p>{{ v.classify }}</p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="page <= 1">上一页</button>
      <span>第 {{ page }} / {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="page >= totalPages">下一页</button>
    </div>

    <!-- 播放器 -->
    <div v-if="currentVideo" class="player">
      <h2>{{ currentVideo.title }}</h2>
      <video
        id="videoPlayer"
        controls
        autoplay
        :src="getVideoUrl(currentVideo)"
        style="width:100%;max-width:800px;"
      ></video>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import axios from "axios";

const videos = ref([]);
const search = ref("");
const selectedClassify = ref("");
const classifyList = ref([]);
const currentVideo = ref(null);

const page = ref(1);
const pageSize = ref(8);
const total = ref(0);

const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

const fetchVideos = async () => {
  const backendBase = `${window.location.protocol}//${window.location.hostname}:6900`;
  const res = await axios.get(`${backendBase}/api/videos`, {
    params: {
      page: page.value,
      pageSize: pageSize.value,
      search: search.value,
      classify: selectedClassify.value,
    },
  });
  videos.value = res.data.data;
  total.value = res.data.total;
  // 自动生成分类列表
  classifyList.value = [...new Set(res.data.data.map((v) => v.classify).filter(Boolean))];
};

const playVideo = (v) => {
  currentVideo.value = v;
};

const prevPage = () => {
  if (page.value > 1) {
    page.value--;
    fetchVideos();
  }
};

const nextPage = () => {
  if (page.value < totalPages.value) {
    page.value++;
    fetchVideos();
  }
};

// 获取视频 URL
const getVideoUrl = (v) => {
  if (v.m3u8_path?.endsWith(".m3u8")) return v.m3u8_path;
  if (v.directory.endsWith(".mp4") || v.directory.endsWith(".avi"))
    return v.directory;
  return "";
};

onMounted(fetchVideos);
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 900px;
  margin: auto;
  font-family: sans-serif;
}
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}
.video-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.2s;
}
.video-item:hover {
  transform: scale(1.05);
}
.video-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.info {
  padding: 8px;
  text-align: center;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}
.player {
  margin-top: 30px;
  text-align: center;
}
</style>
